import React, { useEffect, useState } from 'react';
import NavBars from '../publicZujian/NavBar';
import { getListOfSongs, getjingpingedanList } from '../../Request/listOf.Songs';
import { Tabs, WhiteSpace } from 'antd-mobile';
import Listleib from './zj';



export default () => {
  const [dataList, setDataList] = useState([])
  const [lunboList, setLunboList] = useState([])

  const fetchDataList = async (cat = '全部', offset = 0, limit = 21) => {
    if (cat === '推荐') {
      const { data } = await getListOfSongs('全部', offset, limit)
      setDataList(data.playlists.slice(3))
    } else if (cat === '精品') {
      const { data } = await getjingpingedanList()
      setDataList(data.playlists)
    } else {
      const { data } = await getListOfSongs(cat, offset, limit)
      setDataList(data.playlists)
    }

  }

  useEffect(() => {
    const fetchData = async (cat = '全部', offset = 0, limit = 21) => {
      const { data } = await getListOfSongs(cat, offset, limit)
      setDataList(data.playlists.slice(3))
    }
    fetchData()
  }, [])

  const tabs = [
    { title: '推荐' },
    { title: '官方' },
    { title: '精品' },
    { title: '华语' },
    { title: '流行' },
    { title: '电子' },
    { title: '轻音乐' },
    { title: '摇滚' }
  ];

  return (
    <div className="find-view">
      {/* 头部标签 */}
      <NavBars value="歌单广场" />

      {/* 页面主体 */}
      <main className="content">
        <WhiteSpace />
        <Tabs onChange={(tab, index) => fetchDataList(tab.title)} tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={5} />}>
          {/* 使用公共组件，并向其中传递数据 */}
          <Listleib datalist={dataList} lunbolist={lunboList} />
        </Tabs>
        <WhiteSpace />
      </main>
    </div>
  )
}
